<!-- pages/lab/gramma/vfor.vue -->
<template>
  <view style="flex-direction: column; flex: 1; justify-content: center;">
    <view>
      <view class="table-item">索引</view>
      <view class="table-item">姓名</view>
      <view class="table-item">年龄</view>
    </view>
    <block v-for="(item, index) in students" :key="index">
      <view v-if="item.age >=20">
        <view class="table-item">{{index}}</view>
        <view class="table-item">{{item.name}}</view>
        <view class="table-item">{{item.age}}</view>
      </view>
    </block>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        students: [{
            name: "张三",
            age: 18
          },
          {
            name: "李四",
            age: 20
          },
          {
            name: "王五",
            age: 21
          }
        ]
      }
    }
  }
</script>

<style>
  view {
    display: flex;
    flex-direction: row;
  }

  .table-item {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
  }
</style>
